<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝色森林中的猫狗冒险</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap');
        
        :root {
            --primary-color: #4a80f0;
            --secondary-color: #a1c4fd;
            --accent-color: #ffd166;
            --text-color: #333;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Ma Shan Zheng', cursive, 'ZCOOL QingKe HuangYou', sans-serif;
            background: linear-gradient(135deg, var(--secondary-color), var(--bg-color));
            color: var(--text-color);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
                radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.7) 1px, transparent 1px),
                radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
            background-size: 100px 100px;
            z-index: -1;
            opacity: 0.5;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            max-width: 800px;
            width: 100%;
        }
        
        h1 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            display: inline-block;
        }
        
        h1::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--accent-color);
            border-radius: 2px;
        }
        
        .intro {
            font-size: 1.2rem;
            line-height: 1.6;
            margin-bottom: 20px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .story-container {
            position: relative;
            max-width: 800px;
            width: 100%;
            margin-bottom: 40px;
            perspective: 1000px;
        }
        
        .story-card {
            background-color: var(--card-bg);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin-bottom: 20px;
            transition: all 0.5s ease;
            transform-style: preserve-3d;
            position: relative;
            overflow: hidden;
            display: none;
        }
        
        .story-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        }
        
        .story-card.active {
            display: block;
            animation: fadeIn 0.8s ease forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card-title {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .card-title i {
            margin-right: 10px;
            color: var(--accent-color);
        }
        
        .card-content {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .animal-character {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            position: relative;
            height: 100px;
        }
        
        .cat, .dog {
            position: absolute;
            font-size: 3rem;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
        
        .cat {
            left: 30%;
            color: #ff9a3c;
            animation-name: bounce;
        }
        
        .dog {
            right: 30%;
            color: #3c8aff;
            animation-name: bounce;
            animation-delay: 0.5s;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            font-family: inherit;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .btn-prev {
            background: linear-gradient(to right, #6c757d, #adb5bd);
        }
        
        .progress-container {
            flex-grow: 1;
            margin: 0 20px;
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            width: 0;
            transition: width 0.3s ease;
            border-radius: 4px;
        }
        
        .progress-text {
            position: absolute;
            top: -25px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-color);
        }
        
        .decoration {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0.3;
            z-index: -1;
            animation: float 6s infinite ease-in-out;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        .decoration:nth-child(1) {
            top: 10%;
            left: 5%;
            color: var(--primary-color);
            animation-delay: 0s;
        }
        
        .decoration:nth-child(2) {
            top: 30%;
            right: 8%;
            color: var(--accent-color);
            animation-delay: 1s;
        }
        
        .decoration:nth-child(3) {
            bottom: 20%;
            left: 15%;
            color: #ff6b6b;
            animation-delay: 2s;
        }
        
        .decoration:nth-child(4) {
            bottom: 40%;
            right: 5%;
            color: #51cf66;
            animation-delay: 3s;
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            .intro {
                font-size: 1rem;
            }
            
            .story-card {
                padding: 20px;
            }
            
            .card-title {
                font-size: 1.3rem;
            }
            
            .card-content {
                font-size: 1rem;
            }
            
            .animal-character {
                height: 80px;
            }
            
            .cat, .dog {
                font-size: 2.5rem;
            }
            
            .btn {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .story-card {
                padding: 15px;
                border-radius: 15px;
            }
            
            .controls {
                flex-direction: column;
                gap: 10px;
            }
            
            .progress-container {
                width: 100%;
                margin: 10px 0;
            }
            
            .animal-character {
                height: 60px;
            }
            
            .cat, .dog {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="decoration">🐾</div>
    <div class="decoration">✨</div>
    <div class="decoration">🌿</div>
    <div class="decoration">🌈</div>
    
    <header>
        <h1>蓝色森林中的猫狗冒险</h1>
        <div class="intro">
            欢迎来到神奇的蓝色森林！在这里，一只勇敢的猫和一只忠诚的狗将展开一段不可思议的冒险旅程。跟随它们一起探索魔法世界，解开神秘谜题，发现真正的友谊力量！
        </div>
    </header>
    
    <div class="story-container">
        <div class="story-card active" data-index="1">
            <h2 class="card-title"><i class="fas fa-paw"></i>第一章：神秘邀请</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                在一个被蓝色光芒笼罩的魔法森林边缘，住着一只名叫小咪的橘猫和一只名叫阿黄的金毛犬。这天清晨，他们在小溪边发现了一个闪闪发光的蓝色信封。信封里有一张地图和一行神秘文字："寻找蓝色水晶，拯救魔法森林"。小咪和阿黄对视一眼，决定踏上这场未知的冒险。
            </div>
        </div>
        
        <div class="story-card" data-index="2">
            <h2 class="card-title"><i class="fas fa-map"></i>第二章：魔法地图</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                地图上标注着三个神秘地点：闪耀瀑布、迷雾山谷和星光湖。第一站是闪耀瀑布，据说那里的水流会发出音乐般的声音。阿黄用灵敏的鼻子带路，小咪则负责解读地图上的神秘符号。途中，他们遇到了一群会说话的小鸟，小鸟告诉他们："只有真诚的心才能找到真正的路。"
            </div>
        </div>
        
        <div class="story-card" data-index="3">
            <h2 class="card-title"><i class="fas fa-water"></i>第三章：闪耀瀑布</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                当他们到达闪耀瀑布时，被眼前的景象惊呆了——瀑布水流真的像水晶一样闪闪发光，发出悦耳的旋律。突然，一块蓝色水晶从瀑布中飞出，悬停在半空。但要拿到它并不容易，必须解开一个谜题："我像蓝天却不在天上，像大海却没有浪，是什么？"小咪灵机一动："是蓝色蝴蝶！"水晶应声落下。
            </div>
        </div>
        
        <div class="story-card" data-index="4">
            <h2 class="card-title"><i class="fas fa-cloud"></i>第四章：迷雾山谷</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                第二站是神秘的迷雾山谷。这里被浓重的蓝色雾气笼罩，能见度极低。阿黄的嗅觉也受到了干扰。就在他们一筹莫展时，一只发光的蓝色萤火虫出现了，愿意为他们引路。"跟着我的光走，"萤火虫说，"但要小心脚下的魔法蘑菇，它们会让你迷失方向。"小咪和阿黄手拉着手，小心翼翼地跟随萤火虫穿过迷雾。
            </div>
        </div>
        
        <div class="story-card" data-index="5">
            <h2 class="card-title"><i class="fas fa-gem"></i>第五章：水晶考验</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                穿过迷雾后，他们发现了一块巨大的蓝色水晶碑。碑上写着："证明你们的勇气和友谊。"突然，水晶碑分成两半，中间出现了一条狭窄的通道。阿黄有点害怕，但小咪鼓励他："我们一起过去！"他们紧贴着彼此，慢慢穿过通道。当最后一步跨出时，第二块蓝色水晶出现在他们面前。
            </div>
        </div>
        
        <div class="story-card" data-index="6">
            <h2 class="card-title"><i class="fas fa-star"></i>第六章：星光湖</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                最后一站是星光湖，这里的水面如同星空般闪烁着蓝色的光芒。但要找到最后一块水晶，他们必须回答湖中精灵的问题："什么是世界上最强大的魔法？"阿黄想说"力量"，小咪想说"智慧"，但他们同时想到了什么，异口同声地说："友谊！"湖面顿时光芒大盛，最后一块水晶浮出水面。
            </div>
        </div>
        
        <div class="story-card" data-index="7">
            <h2 class="card-title"><i class="fas fa-tree"></i>第七章：森林危机</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                集齐三块水晶后，地图显示了一个新的地点——古老橡树。当他们赶到时，发现森林的蓝色光芒正在迅速消失！树精灵告诉他们，一个自私的巫师想独占森林魔法，导致生态失衡。唯一的解决办法是将三块水晶放置在树根处的特定位置，同时唱出友谊之歌。但时间所剩无几，他们必须立刻行动！
            </div>
        </div>
        
        <div class="story-card" data-index="8">
            <h2 class="card-title"><i class="fas fa-magic"></i>第八章：友谊魔法</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                小咪和阿黄迅速将水晶放置好，然后开始唱歌。起初声音很小，但随着他们的真诚投入，歌声越来越响亮。奇妙的是，森林里的其他动物也加入了合唱。蓝色的光芒从水晶中迸发，形成一张巨大的光网覆盖整个森林。巫师的黑暗魔法被净化了，森林恢复了生机，甚至比之前更加美丽！
            </div>
        </div>
        
        <div class="story-card" data-index="9">
            <h2 class="card-title"><i class="fas fa-award"></i>第九章：英雄归来</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                森林居民为两位小英雄举办了盛大的庆祝会。树精灵授予他们"森林守护者"的称号，萤火虫们组成了"谢谢"的字样在夜空中闪烁。巫师也认识到了自己的错误，承诺用魔法帮助森林。小咪和阿黄坐在高处，看着重获新生的蓝色森林，感到无比自豪。这次冒险让他们明白：只要有勇气和友谊，就没有克服不了的困难。
            </div>
        </div>
        
        <div class="story-card" data-index="10">
            <h2 class="card-title"><i class="fas fa-heart"></i>终章：新的开始</h2>
            <div class="animal-character">
                <div class="cat">🐱</div>
                <div class="dog">🐶</div>
            </div>
            <div class="card-content">
                回到小溪边的家，小咪和阿黄的生活看似恢复了平静，但他们知道一切都不同了。现在，他们经常帮助森林里的其他动物解决问题，分享冒险故事。有时候，他们还会收到神秘的蓝色信封，邀请他们开始新的冒险。每当这时，他们就会相视一笑，准备好背包，踏上新的旅程，因为这就是勇敢的森林守护者的使命！
            </div>
        </div>
        
        <div class="controls">
            <button class="btn btn-prev" id="prevBtn"><i class="fas fa-arrow-left"></i> 上一页</button>
            <div class="progress-container">
                <div class="progress-text" id="progressText">1/10</div>
                <div class="progress-bar" id="progressBar"></div>
            </div>
            <button class="btn" id="nextBtn">下一页 <i class="fas fa-arrow-right"></i></button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.story-card');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            let currentCard = 0;
            const totalCards = cards.length;
            
            // 初始化
            updateProgress();
            
            // 下一页按钮
            nextBtn.addEventListener('click', function() {
                if (currentCard < totalCards - 1) {
                    cards[currentCard].classList.remove('active');
                    currentCard++;
                    cards[currentCard].classList.add('active');
                    updateProgress();
                }
            });
            
            // 上一页按钮
            prevBtn.addEventListener('click', function() {
                if (currentCard > 0) {
                    cards[currentCard].classList.remove('active');
                    currentCard--;
                    cards[currentCard].classList.add('active');
                    updateProgress();
                }
            });
            
            // 更新进度条
            function updateProgress() {
                const progress = ((currentCard + 1) / totalCards) * 100;
                progressBar.style.width = `${progress}%`;
                progressText.textContent = `${currentCard + 1}/${totalCards}`;
                
                // 更新按钮状态
                prevBtn.disabled = currentCard === 0;
                nextBtn.disabled = currentCard === totalCards - 1;
            }
            
            // 键盘控制
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowRight') {
                    nextBtn.click();
                } else if (e.key === 'ArrowLeft') {
                    prevBtn.click();
                }
            });
        });
    </script>
</body>
</html>